<template>
  <div class="employee-grow">
    <div class="employee-tree border">
      <div class="tree">
        <template v-for="tag in treeData">
          <Tag
            v-for="item in tag"
            :key="item.name"
            :params="item"
          />
        </template>
        <img src="../../assets/employeeTree/tree.png" width="800">
      </div>
    </div>
    <div class="employee-data-view">
      <div class="user-info-content border right-padding">
        <div class="tit">个人信息</div>
        <div class="user-info">
          <div class="user-head">
            <img :src="headImgSrc" width="106" height="140" style="border-radius: 53px;">
          </div>
          <div class="info">
            <div v-for="item in userInfo" :key="item.label" class="content">
              <div class="label">{{ item.label }}</div>
              <div class="label-content" :title="item.content">{{ item.content }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="result border right-padding">
        <div ref="resultChartBar" class="chart-bar" style="width: 100%;height: 250px;" />
      </div>
      <div class="performance border right-padding">
        <div ref="performanceChartBar" class="chart-bar" style="width: 100%;height: 250px;" />
      </div>
    </div>
  </div>
</template>

<script>
import Tag from './tag'
import { findFileList } from '@/api/app'
import { mapState } from 'vuex'
import { getCompletion } from '@/api/baseInfo'
import { userPerformance, userBaseInfo, growTree } from '@/api/employeeGrow'
var echarts = require('echarts/lib/echarts')
// 引入柱状图
require('echarts/lib/chart/bar')
// 引入提示框和标题组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/lib/component/legend')
export default {
  name: 'EmployeeGrow',
  components: {
    Tag
  },
  data() {
    return {
      treeData: [
        [
          {
            name: '高级技师',
            tagLeft: '70px',
            tagTop: '213px',
            tagWidth: '80px',
            lineWidth: '8px',
            lineRight: '-8px',
            lineBackgroundColor: 'rgb(122, 42, 85)',
            circleBackgroundColor: 'rgb(122, 42, 85)',
            isHigh: false
          },
          {
            name: '技师',
            tagTop: '335px',
            lineWidth: '12px',
            lineRight: '-12px',
            isHigh: false
          },
          {
            name: '高级工',
            tagTop: '373px',
            lineWidth: '14px',
            lineRight: '-14px',
            isHigh: false
          },
          {
            name: '中级工',
            tagTop: '401px',
            lineWidth: '22px',
            lineRight: '-22px',
            isHigh: false
          },
          {
            name: '初级工',
            tagTop: '429px',
            lineWidth: '48px',
            lineRight: '-48px',
            isHigh: false
          }
        ],
        [
          {
            name: '国家级专家人才',
            tagTop: '100px',
            lineWidth: '12px',
            lineRight: '-12px',
            isHigh: false
          },
          {
            name: '国网科技领军',
            tagTop: '125px',
            lineWidth: '12px',
            lineRight: '-12px',
            isHigh: false
          },
          {
            name: '国网专业领军',
            tagTop: '165px',
            lineWidth: '16px',
            lineRight: '-16px',
            isHigh: false
          },
          {
            name: '国网专家',
            tagTop: '190px',
            lineWidth: '16px',
            lineRight: '-16px',
            isHigh: false
          },
          {
            name: '省公司专业领军',
            tagTop: '210px',
            lineWidth: '18px',
            lineRight: '-18px',
            isHigh: false
          },
          {
            name: '国网后备',
            tagTop: '235px',
            lineWidth: '20px',
            lineRight: '-20px',
            isHigh: false
          },
          {
            name: '省公司专家',
            tagTop: '255px',
            lineWidth: '22px',
            lineRight: '-22px',
            isHigh: false
          },
          {
            name: '省公司后备',
            tagTop: '280px',
            lineWidth: '24px',
            lineRight: '-24px',
            isHigh: false
          },
          {
            name: '市公司专家',
            tagTop: '300px',
            lineWidth: '24px',
            lineRight: '-24px',
            isHigh: false
          },
          {
            name: '市公司后备',
            tagTop: '340px',
            lineWidth: '30px',
            lineRight: '-30px',
            isHigh: false
          }
        ],
        [
          {
            name: '首席职员',
            tagTop: '120px',
            lineWidth: '28px',
            lineRight: '-28px',
            isHigh: false
          },
          {
            name: '二级职员',
            tagTop: '145px',
            lineWidth: '28px',
            lineRight: '-28px',
            isHigh: false
          },
          {
            name: '三级职员',
            tagTop: '170px',
            lineWidth: '28px',
            lineRight: '-28px',
            isHigh: false
          },
          {
            name: '四级职员',
            tagTop: '220px',
            lineWidth: '28px',
            lineRight: '-28px',
            isHigh: false
          },
          {
            name: '五级职员',
            tagTop: '295px',
            lineWidth: '28px',
            lineRight: '-28px',
            isHigh: false
          },
          {
            name: '六级职员',
            tagTop: '325px',
            lineWidth: '20px',
            lineRight: '-20px',
            isHigh: false
          },
          {
            name: '七级职员',
            tagTop: '350px',
            lineWidth: '20px',
            lineRight: '-20px',
            isHigh: false
          },
          {
            name: '八级职员',
            tagTop: '375px',
            lineWidth: '20px',
            lineRight: '-20px',
            isHigh: false
          }
        ],
        [
          {
            name: '正处级',
            tagTop: '130px',
            lineWidth: '22px',
            lineRight: '110px',
            circleRight: '22px',
            isHigh: false
          },
          {
            name: '副处级',
            tagTop: '160px',
            lineWidth: '22px',
            lineRight: '110px',
            circleRight: '22px',
            isHigh: false
          },
          {
            name: '正科级',
            tagTop: '200px',
            lineWidth: '30px',
            lineRight: '110px',
            circleRight: '30px',
            isHigh: false
          },
          {
            name: '副科级',
            tagTop: '280px',
            lineWidth: '30px',
            lineRight: '110px',
            circleRight: '30px',
            isHigh: false
          },
          {
            name: '正股级(县公司)',
            tagTop: '310px',
            lineWidth: '30px',
            lineRight: '110px',
            circleRight: '30px',
            isHigh: false
          },
          {
            name: '副股级(县公司)',
            tagTop: '340px',
            lineWidth: '30px',
            lineRight: '110px',
            circleRight: '30px',
            isHigh: false
          }
        ],
        [
          {
            name: '正高',
            tagTop: '170px',
            lineWidth: '8px',
            lineRight: '70px',
            circleRight: '8px',
            isHigh: false
          },
          {
            name: '副高',
            tagTop: '286px',
            lineWidth: '8px',
            lineRight: '70px',
            circleRight: '8px',
            isHigh: false
          },
          {
            name: '工程师',
            tagTop: '340px',
            lineWidth: '8px',
            lineRight: '70px',
            circleRight: '8px',
            isHigh: false
          },
          {
            name: '助理工程师',
            tagTop: '397px',
            lineWidth: '30px',
            lineRight: '70px',
            circleRight: '30px',
            isHigh: false
          }
        ]
      ],
      headImgSrc: require('../../assets/imgs/timg.jpg'),
      userInfo: [
        {
          label: '入职时间:',
          content: '',
          prop: 'jobDate'
        },
        {
          label: '工作岗位:',
          content: '',
          prop: 'curPost'
        },
        {
          label: '职员职级:',
          content: '',
          prop: 'posZhiName'
        },
        {
          label: '职务:',
          content: '',
          prop: 'posName'
        },
        {
          label: '专家人才称号:',
          content: '',
          prop: 'empTitleName'
        }
      ],
      seriesType: ['t_acade_achive_info', 't_stand_info', 't_patent_info', 't_contest_info', 't_honor_info'],
      map: {
        0: 't_acade_achive_info',
        1: 't_stand_info',
        2: 't_patent_info',
        3: 't_contest_info',
        4: 't_honor_info'
      }
    }
  },
  computed: {
    ...mapState(['currentUser'])
  },
  created() {
    this.treeData.forEach((item, i) => {
      item.forEach(v => {
        switch (i) {
          case 0:
            v.tagWidth = '70px'
            v.tagLeft = '80px'
            v.lineBackgroundColor = 'rgb(122, 42, 85)'
            v.circleBackgroundColor = 'rgb(122, 42, 85)'
            break
          case 1:
            v.tagWidth = '90px'
            v.tagLeft = '186px'
            v.lineBackgroundColor = 'rgb(122, 42, 85)'
            v.circleBackgroundColor = 'rgb(122, 42, 85)'
            break
          case 2:
            v.tagWidth = '80px'
            v.tagLeft = '355px'
            v.lineBackgroundColor = 'rgb(27, 153, 230)'
            v.circleBackgroundColor = 'rgb(27, 153, 230)'
            break
          case 3:
            v.tagWidth = '110px'
            v.tagLeft = '500px'
            v.lineBackgroundColor = 'rgb(230, 133, 18)'
            v.circleBackgroundColor = 'rgb(230, 133, 18)'
            break
          case 4:
            v.tagWidth = '70px'
            v.tagLeft = '652px'
            v.lineBackgroundColor = 'rgb(78, 86, 252)'
            v.circleBackgroundColor = 'rgb(78, 86, 252)'
            break
        }
      })
    })
    this.getGrowTree()
  },
  mounted() {
    this.initResultChartBar()
    this.initPerformanceChartBar()
    this.getUserBaseInfo()
    this.getUserHead()
  },
  methods: {
    async getUserHead() {
      const { data: imgData } = await findFileList({
        businessId: this.currentUser.fax,
        sysCode: 'personManage',
        businessNode: 'userHead'
      })
      imgData.sort((v1, v2) => {
        if (this.$moment(v1.uploadTime).isAfter(this.$moment(v2.uploadTime))) {
          return -1
        } else {
          return 1
        }
      })
      if (imgData[0]) {
        this.headImgSrc = `/comm-file-server/file/download?fileId=${imgData[0].id}`
      }
    },
    async initResultChartBar() {
      const { data } = await getCompletion({ erpNo: this.currentUser.fax })
      const seriesData = []
      this.seriesType.forEach(v => seriesData.push(data[v] || 0))
      const myChart = echarts.init(this.$refs.resultChartBar)
      myChart.setOption({
        title: {
          text: '学术荣誉成果',
          textStyle: {
            fontSize: 16
          }
        },
        color: ['rgb(58, 161, 255)'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          top: 40,
          left: '1%',
          right: '1%',
          bottom: '0%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['论文、专著', '制度标准', '专利、软件著作权', '竞赛考试', '个人荣誉'],
            axisTick: {
              show: false
            },
            axisLabel: {
              interval: 0,
              rotate: 30,
              color: '#000'
            },
            axisLine: {
              lineStyle: {
                color: '#ccc'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            minInterval: 1,
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed'
              }
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            }
          }
        ],
        series: [
          {
            type: 'bar',
            data: seriesData,
            barWidth: 22
          }
        ]
      })
    },
    async initPerformanceChartBar() {
      const { data } = await userPerformance({ erpNo: this.currentUser.fax })
      const years = Object.keys(data)
      years.sort((a, b) => Number(a) - Number(b))
      const dimensions = ['performance']
      years.forEach(year => dimensions.push(`${year}年度`))
      const source = [
        { performance: '论文、专著' },
        { performance: '\n制度标准' },
        { performance: '专利、软件著作权' },
        { performance: '\n竞赛考试' },
        { performance: '个人荣誉' }
      ]
      source.forEach((v, i) => {
        years.forEach(year => {
          v[`${year}年度`] = data[year][this.map[i]]
        })
      })
      const myChart = echarts.init(this.$refs.performanceChartBar)
      myChart.setOption({
        title: {
          text: '近三年业绩',
          textStyle: {
            fontSize: 16
          }
        },
        legend: {
          icon: 'circle',
          itemWidth: 10,
          itemHeight: 10
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          top: 40,
          left: '1%',
          right: '1%',
          bottom: '0%',
          containLabel: true
        },
        dataset: {
          dimensions,
          source
        },
        xAxis: {
          data: ['论文、专著', '\n制度标准', '专利、软件著作权', '\n竞赛考试', '个人荣誉'],
          axisTick: {
            show: false
          },
          axisLabel: {
            interval: 0,
            color: '#000'
          },
          axisLine: {
            lineStyle: {
              color: '#ccc'
            }
          }
        },
        yAxis: {
          type: 'value',
          minInterval: 1,
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed'
            }
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        series: [
          {
            type: 'bar',
            itemStyle: {
              color: 'rgb(58, 161, 255)'
            },
            barWidth: 18,
            barGap: '10%'
          },
          {
            type: 'bar',
            itemStyle: {
              color: 'rgb(195, 137, 60)'
            },
            barWidth: 18,
            barGap: '10%'
          },
          {
            type: 'bar',
            itemStyle: {
              color: 'rgb(78, 203, 115)'
            },
            barWidth: 18,
            barGap: '10%'
          }
        ]
      })
    },
    async getUserBaseInfo() {
      const { data } = await userBaseInfo({ erpNo: this.currentUser.fax })
      // eslint-disable-next-line no-return-assign
      this.userInfo.forEach(v => v.content = data[v.prop])
    },
    async getGrowTree() {
      const { data } = await growTree({ erpNo: this.currentUser.fax })
      const classifyMap = {
        't_skill_level_info': 0,
        't_expert_title_info': 1,
        't_pro_tec_info': 4,
        t_pos_zhij: 2,
        t_pos_rel: 3
      }
      for (const key in data) {
        const high = data[key] && this.treeData[classifyMap[key]].find(v => v.name === data[key].value)
        if (high) {
          high.isHigh = true
          high.awardTime = data[key].awardTime
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.employee-grow{
  display: flex;
  padding: 15px 80px 0px 15px;
  width: 100%;
  .border{
    border: 1px solid #EBEBEB;
    border-radius: 4px;
  }
  .right-padding{
    padding: 15px;
  }
  .employee-tree{
    min-width: 800px;
    flex: 6;
    position: relative;
    .tree{
      width: 800px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50% ,-50%);
      text-align: center;
    }
  }
  .employee-data-view{
    padding-left: 25px;
    flex: 4;
    .tit{
        font-size: 16px;
        font-weight: 600;
        height: 30px;
        line-height: 30px;
    }
    .user-info-content{
      .user-info{
        display: flex;
        width: 100%;
        .user-head{
          width: 106px;
          margin-right: 10px;
        }
        .info{
          width: 0;
          flex: 1;
        }
        .content{
          display: flex;
          width: 100%;
          height: 30px;
          line-height: 30px;
          font-size: 14px;
          font-family: Source Han Sans CN;
          .label{
            vertical-align: middle;
            margin-right: 8px;
            width: 100px;
            text-align: right;
          }
          .label-content{
            vertical-align: middle;
            flex: 1;
            width: 0;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
          }
        }

      }
    }
    .result{
      margin: 25px 0;
    }
  }
}
</style>
